
import React = require('react');
import { pageDatas } from 'services/page-datas';
import { ComponentData, Component } from 'maishu-jueying';
import { MasterPage } from 'components/common/master-page';
import { contextName } from "json!websiteConfig";
import { LocalService } from "services/local-service";
import errorHandle from 'error-handle';

requirejs({ context: contextName }, ["css!devices"]);

interface DesignTimePageProps {
    color: StyleColor,
    pageName: keyof typeof pageDatas
}

class DesignTimePage extends React.Component<DesignTimePageProps, { pageData?: ComponentData }> {
    masterPage: MasterPage;

    constructor(props) {
        super(props);

        this.state = {}
    }

    componentDidUpdate() {
        if (this.masterPage)
            this.masterPage.style.value = this.props.color;
    }

    componentDidMount() {
        pageDatas.home().then(async record => {
            await this.loadCompontents(record.pageData);
            this.setState({ pageData: record.pageData });
        })
    }

    render() {
        let { pageData } = this.state;
        if (!pageData) {
            return <div></div>
        }

        pageData.props = pageData.props || {};
        pageData.props.ref = (e: MasterPage) => {
            if (!e) return;
            this.masterPage = e;
        }

        let c = Component.createElement(pageData);
        return c;
    }

    async loadCompontents(pageData: ComponentData) {
        let localService = new LocalService((err) => errorHandle(err));
        let componentInfos = await localService.componentInfos();
        let componentTypes = pageData.children.map(o => o.type);
        let componentToLoad = componentInfos.filter(o => o.name != null && componentTypes.indexOf(o.name) >= 0)
        let r = componentToLoad.map(componentInfo => {
            return new Promise((resolve, reject) => {
                let componentPath = componentInfo.path;
                requirejs({ context: contextName }, [componentPath],
                    (mod) => {

                        console.assert(componentInfo.name != null);
                        console.assert(typeof mod[componentInfo.name] == "function");
                        Component.register(componentInfo.name, mod[componentInfo.name]);

                        resolve();
                    },
                    () => {
                        reject();
                    }
                )
            })
        })

        return Promise.all(r);
    }
}

interface Props extends React.Props<VirtualMobile> {
    scale?: number,
    color?: StyleColor,
    displayMobile?: boolean,
}

export class VirtualMobile extends React.Component<Props, {}>{
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {

        let scale = this.props.scale != null ? this.props.scale : 1;
        let color = this.props.color ? this.props.color : "default";
        let displayMobile = this.props.displayMobile == null ? true : this.props.displayMobile;

        let mainElement = <div className="screen mobile-page" style={{ textAlign: "left" }}>
            <DesignTimePage color={color} pageName="home"></DesignTimePage>
        </div>

        return displayMobile ? <div className={`marvel-device iphone8 black`} style={{ transform: `scale(${scale})` }}>
            <div className="top-bar"></div>
            <div className="sleep"></div>
            <div className="volume"></div>
            <div className="camera"></div>
            <div className="sensor"></div>
            <div className="speaker"></div>
            {mainElement}
            <div className="home"></div>
            <div className="bottom-bar"></div>
        </div> : mainElement

    }


}

